<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>后台首页管理</title>
  <!--引入的vue.js-->
  <script src="/js/vue.js"></script>
  <!--引入elementUI的css-->
  <link  type="text/css" rel="stylesheet" href="/css/index.css">
  <!--引入elementUI的js-->
  <script src="/js/index.js"></script>
  <!--引入axios.js-->
  <script src="/js/axios.min.js"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100vh;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    
    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    #app .el-container {
      height: 100%;
    }
    
    .el-header {
      background: linear-gradient(135deg, #1976d2, #2196f3);
      color: white;
      text-align: center;
      height: 50px !important;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }

    .el-aside {
      background-color: #fff;
      color: #333;
      box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
      border-right: 1px solid #eee;
      width: 220px !important;
      height: calc(100vh - 50px);
      overflow-y: auto;
      transition: width 0.3s;
    }

    .el-main {
      background-color: #f5f7fa;
      color: #333;
      padding: 15px;
      height: calc(100vh - 80px);
      overflow: hidden;
      flex: 1;
      position: relative;
    }

    .el-footer {
      background-color: #f8f9fa;
      color: #6c757d;
      text-align: center;
      height: 30px !important;
      line-height: 30px;
      border-top: 1px solid #eee;
      padding: 0;
      font-size: 12px;
    }

    .header-title {
      flex-grow: 1;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 1px;
    }

    .logout-btn {
      padding: 7px 15px;
      font-size: 12px;
      border-radius: 15px;
      transition: all 0.3s ease;
    }

    .logout-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* 树形菜单样式优化 */
    .el-tree {
      background: transparent;
      padding: 5px;
    }

    .el-tree-node__content {
      height: 36px;
      transition: all 0.3s ease;
    }

    .el-tree-node__content:hover {
      background-color: #e8f4fe;
    }

    /* 标签页样式优化 */
    .el-tabs {
      height: 100%;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .el-tabs__header {
      margin: 0 !important;
      padding: 10px 10px 0;
      background: #fff;
      border-radius: 4px 4px 0 0;
    }

    .el-tabs__content {
      flex: 1;
      padding: 10px;
      overflow: hidden;
    }

    .el-tab-pane {
      height: 100%;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item {
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      padding: 0 15px;
      border-radius: 4px 4px 0 0;
    }

    .el-tabs__item.is-active {
      color: #1976d2;
      border-bottom-color: #1976d2;
    }

    /* iframe 容器样式 */
    .tab-iframe-container {
      height: calc(100% - 10px);
      overflow: hidden;
      border-radius: 0 0 4px 4px;
    }

    iframe {
      width: 100%;
      height: 100%;
      background: #fff;
      border: none;
    }

    /* 滚动条样式 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }

    .current-time {
      font-size: 14px;
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    
    .current-time i {
      margin-right: 5px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>
      <div class="header-title">cosPlay ERP</div>
      <div class="current-time">
        <i class="el-icon-time"></i>
        {{currentTime}}
      </div>
      <el-button type="danger" size="small" icon="el-icon-switch-button" class="logout-btn" @click="handleLogout">退出登录</el-button>
    </el-header>
    <el-container>
      <el-aside>
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <div class="tab-iframe-container">
                <iframe :src="item.url" frameborder="0"></iframe>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-main>
        <el-footer>© 2024 cosPlay ERP. All rights reserved.</el-footer>
      </el-container>
    </el-container>
  </el-container>
</div>
<script>
  new Vue({
    el:"#app",
    data(){
      return{
        currentTime: '',  // 当前时间
        data:[],//树数据
        defaultProps: { //树数据父子组件传参
          children: 'children',
          label: 'label'
        },
        //标签叶相关树形
        editableTabsValue: '1',
        editableTabs: [{
          title: '默认标签页',
          name: '1',
          //content: 'Tab 1 content'
          url: 'https://element.eleme.cn/#/zh-CN'
        }  ],
        tabIndex: 1
      }
    },
    created(){ //初始化
      this.updateCurrentTime(); // 初始化时间
      this.timer = setInterval(this.updateCurrentTime, 1000); // 启动定时器
      
      //定义一个变量，赋值为当前vue对象
      var _this = this;
      axios.get(//请求方式，必须和后端资源暴露方式一致
              '/menu/queryTreeDateByUserId')//请求携带的参数
              .then(function (response) {//成功响应的处理方法   response 是响应的数据
                console.log(response);
                //response 一定是json对象  stringify 把json对象转json字符串
                //alert(JSON.stringify(response));
                //判断返回是否正确
                if(response.data.code==200){
                  //直接使用this 代表axios的对象  this
                  _this.data=response.data.data;
                }
              })
              .catch(function (error) {
                console.log(error);
              });
    },
    destroyed() {
      // 组件销毁时清除定时器
      if (this.timer) {
        clearInterval(this.timer);
      }
    },
    methods:{
      // 更新当前时间的方法
      updateCurrentTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      //点击树节点事件
      handleNodeClick(data) {
        console.log(data);
        //判断url是否为空
        if(data.url!=null&&data.url!='null'&&data.url!=''&&data.url!=undefined){
          //调用添加标签页方法  把要请求的url地址和标签名 传递进去
          this.addTab(data.url,data.label);
        }
      },
      //添加标签页
      addTab(url,label) {
        //每次添加新的标签页时   标签页的下标+1
        let newTabName = ++this.tabIndex + '';
        //定义是否已经标签变量
        var  isHaveTab = false;
        //定义变量等于循环数组
        let tabs = this.editableTabs;
        //循环所有页签页
        tabs.forEach((tab, index) => {
          //如果为true 说明当前点击节点（部门管理），已经存在标签页
          if(label === tab.title){// 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
            //已经存在label
            isHaveTab = true;
            newTabName =tab.name;
          }
        });
        //isHaveTab  集合中没有的时候，添加
        if(!isHaveTab){
          //向循环数组中添加一个对象
          this.editableTabs.push({
            title:  label,
            name: newTabName,
            // content: 'New Tab content',
            url:url
          });
        }
        //正在编辑的标签页的值   这个值是几，那个标签页就高亮
        this.editableTabsValue = newTabName;
      },
      //移除标签页
      removeTab(targetName) {
        //定义变量等于循环数组
        let tabs = this.editableTabs;
        //获取高亮标签页的值
        let activeName = this.editableTabsValue;
        // 判断高亮标签页的值是否等于当前打开的标签页的名称   ===  既比较类型，还比较值  ==  只比较值
        if (activeName === targetName) {
          //循环
          tabs.forEach((tab, index) => {
            //再次判断当前循环标签页对象的名称是否等于  当前打开的标签页的名称
            if (tab.name === targetName) {
              //定义变量下一个标签页
              let nextTab = tabs[index + 1] || tabs[index - 1];
              //如果nextTab有值
              if (nextTab) {
                //要高亮的标签页的名称
                activeName = nextTab.name;
              }
            }
          });
        }
        //正在编辑的标签页的值   这个值是几，那个标签页就高亮
        this.editableTabsValue = activeName;
        //过滤，过滤后赋值给原来的循环数组
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      handleLogout() {
        var _this = this;
        axios.post('/user/logout')
          .then(function(response) {
            if(response.data.code == 200){
              _this.$message({
                message: '退出成功',
                type: 'success'
              });
              // 修改跳转路径
              window.location.href = '/html/login.html';
            } else {
              _this.$message.error('退出失败：' + response.data.msg);
            }
          })
          .catch(function(error) {
            console.error('退出时发生错误:', error);
            _this.$message.error('退出时发生错误，请稍后重试');
          });
      }
    }
  })
</script>
</body>
</html>